.plane {
  --diameter: calc(var(--radius) * 2);
  --neg-radius: calc(var(--radius) * -1);
  transform-style: preserve-3d;
  position: absolute;
  border-radius: 50%;
  width: var(--diameter);
  height: var(--diameter);
  transform: translateX(var(--neg-radius)) translateY(var(--neg-radius)) rotateY(90deg)
    rotateX(calc(var(--plane) * (180deg / var(--planes))));
}

.spoke {
  transform-style: preserve-3d;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 2px;
  left: calc(50% - 1px);
  transform: rotateZ(calc(var(--spoke) * (360deg / var(--spokes))));
}

.face {
  --this-height: calc(var(--diameter) / var(--planes) * 1.57);
  --this-width: calc(var(--diameter) / var(--spokes) * 3.14);

  transform-style: preserve-3d;
  position: absolute;
  width: var(--this-width);
  height: var(--this-height);

  left: calc(-1 * (var(--this-width) / 2) + 1px);
  border: 1px solid black;
  background-color: var(--bg);
  transform: rotateX(90deg);
}
